<template>
    <div class="xms-flex-wrap">
        <div class="xms-flex-headerOrBottom">
            <div class="money-main flex-column align-items-center justify-content-center">
                <img width="60px" height="60px" src="../assets/img/money.png">
                <div class="mt10 font-18 font-white font-weight" style="margin-bottom: 10px">¥{{money}}</div>
                <van-button type="primary" size="small" style="border-radius: 5px;width: 100px;margin-top: 20px"
                            @click="show=true">提现
                </van-button>
                <router-link to="/takes">
                    <div style="position: absolute;top: 16px;right: 16px;color: white">提现记录</div>
                </router-link>
            </div>
        </div>
        <div class="xms-flex-middle bg-white">
            <van-list
                    v-model="config.loading"
                    :finished="config.finished"
                    finished-text="没有更多了"
                    @load="gains"
                    :immediate-check="false"
            >
                <div class="mt10">
                    <div class="flex-row justify-content-between align-items-center pd-12-16 border-bottom"
                         v-for="(item,index) in list" :key="index">
                        <div class="flex-column">
                            <van-tag v-if="item.state==1" type="primary" plain style="width: fit-content">
                                {{item.state_name}}
                            </van-tag>
                            <van-tag v-if="item.state==2" type="success" plain style="width: fit-content">
                                {{item.state_name}}
                            </van-tag>
                            <van-tag v-if="item.state==3" type="warning" plain style="width: fit-content">
                                {{item.state_name}}
                            </van-tag>
                            <div class="font-14 mt5">收益：<span class="font-weight">¥{{item.gains_money}}</span></div>
                            <div class="mt5">订单金额：<span class="font-grey">¥{{item.order_money}}</span></div>
                        </div>
                        <van-button v-if="item.state==2" type="primary" size="mini"
                                    style="border-radius: 3px;width: 50px" @click="usher(item.id,index)">领取
                        </van-button>
                    </div>
                </div>
            </van-list>
        </div>
        <van-popup v-model="show" style="border-radius: 8px;overflow: hidden">
            <van-form @submit="onSubmit" style="width: 300px;margin-top: 12px">
                <van-field
                        v-model="username"
                        name="姓名"
                        label="姓名"
                        placeholder="请填写真实姓名"
                />
                <van-field
                        v-model="usermobile"
                        name="账号"
                        label="账号"
                        placeholder="请填写支付宝账号"
                />
                <van-field
                        v-model="usermoney"
                        type="number"
                        name="提现金额"
                        label="提现金额"
                        placeholder="请填写提现金额"
                />
                <div class="flex-row justify-content-around" style="margin: 16px;">
                    <van-button size="small" style="width: 100px;border-radius: 5px" type="info" @click="carry">
                        提交
                    </van-button>
                    <van-button size="small" style="width: 100px;border-radius: 5px" color="#888" plain
                                @click="show=false">
                        取消
                    </van-button>
                </div>
            </van-form>
        </van-popup>
    </div>
</template>
<script>
    import {Toast} from 'vant'

    export default {
        name: "Level",
        data() {
            return {
                show: false,
                username: '',
                usermobile: '',
                usermoney: '',
                url: {
                    users: this.axiosUrl + 'users/users',
                    gains: this.axiosUrl + 'money/gains',
                    carry: this.axiosUrl + 'money/carry',
                    usher: this.axiosUrl + 'money/usher',
                },
                money: '',
                list: [],
                config: {
                    loading: false,
                    finished: false,
                    pageIndex: 1,
                    limit: 10,
                }
            }
        },
        components: {},
        mounted() {
            this.users()
            this.gains()
            this.$wxConfig.share(this.$route.path)

        },
        methods: {
            users() {
                let _this = this
                _this.$http.post(_this.url.users, {}, (res) => {
                    _this.money = res.money
                })
            },
            gains() {
                let _this = this
                _this.config.loading = true
                _this.$http.post(_this.url.gains, {
                    pages: _this.config.pageIndex,
                    limit: _this.config.limit
                }, (res) => {
                    _this.list = _this.list.concat(res)
                    _this.config.pageIndex++
                    if (res.length < _this.config.limit) {
                        _this.config.finished = true
                    } else {
                        _this.config.finished = false
                    }
                })
            },
            carry() {
                let _this = this
                if (_this.username == '') {
                    Toast('请填写真实姓名')
                    return
                } else if (_this.usermobile == '') {
                    Toast('请填写支付宝账号')
                    return
                } else if (_this.usermoney == '') {
                    Toast('请填写提现金额')
                    return
                }
                _this.$http.post(_this.url.carry, {
                    name: _this.username,
                    mobile: _this.usermobile,
                    money: _this.usermoney
                }, () => {
                    Toast('提现成功，等待审核')
                    _this.show=false
                    _this.users()
                })
            },
            usher(id,index){
                let _this = this
                _this.$http.post(_this.url.usher, {id}, () => {
                   Toast('领取成功')
                   _this.$set(_this.list[index],'state',1)
                   _this.$set(_this.list[index],'state_name','已领取')
                })
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .mine-list
        margin 16px
        background white
        border-radius 8px
        overflow hidden

    .money-main {
        height 250px
        background #666
    }

</style>
